<template>
  count:{{ count }}
  {{ $store_my.state.rCount }}
  <br />
  double:{{ double }}
  {{ $store_my.getters.rDouble }}
  <!-- 严格模式下直接修改state的值会报错 -->
  <br />
  <button @click="$store_my.state.rCount++">vuex4严格模式下报错</button>
  <br />
  <!-- 同步修改 -->
  <button @click="add">同步修改</button>

  <!-- 异步修改 -->
  <button @click="asyncAdd">异步修改</button>

  <br />
  aCount:{{ aCount }}{{ $store_my.state.aModule.aCount }}
  <br />
  aDouble:{{ aDouble }}{{ $store_my.getters.aModule.aDouble }}
  <br />
  <!-- 同步修改 -->
  <button @click="addA">同步修改</button>

  <!-- 异步修改 -->
  <button @click="asyncAddA">异步修改</button>

  <br />
  bCount:{{ bCount }}{{ $store_my.state.bModule.bCount }}
  <br />
  bDouble:{{ bDouble }}{{ $store_my.getters.bModule.bDouble }}
  <br />
  <!-- 同步修改 -->
  <button @click="addB">同步修改</button>

  <!-- 异步修改 -->
  <button @click="asyncAddB">异步修改</button>

  <br />
  cCount:{{ cCount }}{{ $store_my.state.aModule.cModule.cCount }}
  <br />
  cDouble:{{ cDouble }}{{ $store_my.getters.aModule.cModule.cDouble }}
  <br />
  <!-- 同步修改 -->
  <button @click="addC">同步修改</button>

  <!-- 异步修改 -->
  <button @click="asyncAddC">异步修改</button>
  <br />
  dCount:{{ dCount }}{{ $store_my.state.bModule.dModule.dCount }}
  <br />
  dDouble:{{ dDouble }}{{ $store_my.getters.bModule.dModule.dDouble }}
  <br />
  <!-- 同步修改 -->
  <button @click="addD">同步修改</button>

  <!-- 异步修改 -->
  <button @click="asyncAddD">异步修改</button>
</template>

<script>
import { computed } from "vue";
import { useStore } from "@/vuex";
export default {
  name: "App",
  setup() {
    const store = useStore("my");

    console.log(store);

    const add = () => {
      store.commit("add", 1);
    };

    const asyncAdd = () => {
      store.dispatch("asyncAdd", 1);
    };

    const addA = () => {
      store.commit("aModule/add", 1);
    };

    const asyncAddA = () => {
      store.dispatch("aModule/asyncAdd", 1);
    };

    const addB = () => {
      store.commit("bModule/add", 1);
    };

    const asyncAddB = () => {
      store.dispatch("bModule/asyncAdd", 1);
    };

    const addC = () => {
      store.commit("aModule/add", 1);
    };

    const asyncAddC = () => {
      store.dispatch("aModule/asyncAdd", 1);
    };

    const addD = () => {
      store.commit("bModule/dModule/add", 1);
    };

    const asyncAddD = () => {
      store.dispatch("bModule/dModule/asyncAdd", 1);
    };

    console.log(store.hasModule("aModule/cModule"));

    console.log(store.hasModule(["bModule", "dModule"]));

    console.log(store.hasModule("xxxx"));

    return {
      // 不使用computed包裹，那么将不会具有响应式
      count: computed(() => store.state.rCount),
      double: computed(() => store.getters.rDouble),
      aCount: computed(() => store.state.aModule.aCount),
      aDouble: computed(() => store.getters.aModule.aDouble),
      bCount: computed(() => store.state.bModule.bCount),
      bDouble: computed(() => store.getters.bModule.bDouble),
      cCount: computed(() => store.state.aModule.cModule.cCount),
      cDouble: computed(() => store.getters.aModule.cModule.cDouble),
      dCount: computed(() => store.state.bModule.dModule.dCount),
      dDouble: computed(() => store.getters.bModule.dModule.dDouble),
      add,
      asyncAdd,
      addA,
      asyncAddA,
      addB,
      asyncAddB,
      addC,
      asyncAddC,
      addD,
      asyncAddD,
    };
  },
};
</script>

<style scoped></style>
